<template>
  <div>
    <!-- 头部 -->
      <head-common title="确认订单"/>
      <div class="warp">
        <!-- 联系人 -->
        <van-contact-card
          :type="cartType"
          :name="currentContact.linkMan"
          :tel="currentContact.mobile"
          @click="onEdit"
        />
        <!-- 商品 -->
        <div class="items" v-for="item in items" :key="item.id">
          <van-card
            :num="item.number"
            :price="item.price"
            :desc="  item.characteristic ? item.characteristic: '暂无描述'"
            :title="item.name"
            :thumb="item.pic"
          />
        </div>
      </div>
      <van-submit-bar :price="total*100" button-text="立即支付" :loading="loading" @submit="onSubmit" />
  </div>
</template>

<script>
import HeadCommon from '../../components/HeadCommon.vue'
import { fetchDefaultContact, fetchContactInfo, cartInfo } from '@api'
import { Toast } from 'vant'
export default {
  components: { HeadCommon },
  data () {
    return {
      // 这个是收获地址的信息
      currentContact: {},
      // 这个是购买商品的信息
      items: [],
      // 这个是商品的总价
      total: '',
      loading: false
    }
  },
  created () {
    this.fetchCartInfo()
    this.fetchContact()
  },
  methods: {
    // 获取订单联系人
    fetchContact () {
      if (this.$route.query.id) {
        fetchContactInfo({
          token: localStorage.getItem('token'),
          id: this.$route.query.id
        }).then(res => {
          if (res.data.code === 0) {
            this.currentContact = res.data.data.info
          }
        })
      } else {
        fetchDefaultContact({
          token: localStorage.getItem('token')
        }).then(res => {
          if (res.data.code === 0) {
            this.currentContact = res.data.data.info
          }
        })
      }
    },
    // 获取购买的商品 然后筛选一下 只有选中的商品其他的不要
    fetchCartInfo () {
      cartInfo({
        token: localStorage.getItem('token')
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items.filter(item => item.selected)
          this.total = res.data.data.price
        }
      })
    },
    onEdit () {
      // 点击修改或者添加联系人 直接去联系人列表页吧
      this.$router.push('/contactList')
    },
    onSubmit () {
      // 点击立即支付
      this.loading = true
      Toast({
        type: 'success',
        message: '支付成功',
        onClose: () => {
          this.loading = false
        }
      })
    }
  },
  computed: {
    // 这里是判断是否有联系人如果有那就是edit 没有的话那就是add
    cartType () {
      return this.currentContact.id ? 'edit' : 'add'
    }
  }
}
</script>

<style lang="scss" scoped>
.warp{
  padding-top: 46px;
  padding-bottom: 50px;
  .van-card{
    margin-top: 15px;
  }
}
</style>
